<script>

/**
 * Orders Component
 */
export default {
  data() {
    return {
      // 选择环境
      states: [
        {
          type: "全部",
          index: 1,
        },{
          type: "测试环境",
          index: 2,
        },
        {
          type: "正式环境",
          index: 3,
        },
      ],
      stateChange: 1,
      // 活动状态
      activeState: [
        {
          type: "全部",
          index: 1,
        },{
          type: "正常",
          index: 2,
        },
        {
          type: "异常",
          index: 3,
        },
      ],
      activeStateChange: 1,
      ordersData: [
        {
          name: "realServer1",
          environment: "测试环境",
          IPaddress: "192.168.71.31",
          configure: "32Core/64GB/500GB",
          activeState: "正常",
          ficServer: "2",
          appServer: "6",
          detectionTime: "2021-09-18",
        },
        {
          name: "realServer2",
          environment: "测试环境",
          IPaddress: "192.168.71.32",
          configure: "32Core/64GB/500GB",
          activeState: "异常",
          ficServer: "3",
          appServer: "9",
          detectionTime: "2021-09-18",
        },
      ],
      totalRows: 100,
      currentPage: 1,
      perPage: 10,
      fields: [
        { key: "name", label: "服务器名称" },
        { key: "environment", label: "机器环境" },
        { key: "IPaddress", label: "IP地址" },
        { key: "configure", label: "机器配置" },
        { key: "activeState", label: "活动状态" },
        { key: "ficServer", label: "虚拟服务器" },
        { key: "appServer", label: "应用服务器" },
        { key: "detectionTime", label: "最后检测时间" },
      ],
    };
  },
  watch: {
    "currentPage": {
      handler(){
        console.log("触发更新");
      }
    }
  },
  methods: {
    // 选择环境
    statesItem(item) {
      this.stateChange = item.index;
    },
    // 活动状态
    activeStates(item){
      this.activeStateChange = item.index;
    },
    onFiltered(filteredItems) {
      this.totalRows = filteredItems.length;
      this.currentPage = 1;
    },
    // 真实服务器详情
    toDetail(row){
      console.log(row);
      this.$router.push('/computing/realDetail')
    },
    // 添加真实服务器监控
    addServer(){
      this.$router.push('/computing/addReal')
    },
  }
};
</script>

<template>
  <div>
    <div class="sel">
      <!-- <div class="all-products">全部信息</div> -->
      <div class="states-type">
        <div>
          <span class="type-title">选择环境:</span>
        </div>
        <div style="width:90%;">
          <button
            type="button"
            class="btn-item"
            :class="{ isActive: stateChange == item.index }"
            v-for="item in states"
            :key="item.index"
            @click="statesItem(item)"
          >
            {{ item.type }}
          </button>
        </div>
      </div>
      <div class="states-time">
        <div>
          <span class="type-title">活动状态:</span>
        </div>
        <div style="width:90%;">
          <button
            type="button"
            class="btn-item"
            :class="{ isActive: activeStateChange == item.index }"
            v-for="item in activeState"
            :key="item.index"
            @click="activeStates(item)"
          >
            {{ item.type }}
          </button>
        </div>
      </div>
    </div>
    <div>
      <div class="search-box">
        <div class="position-relative search">
          <input type="text" class="form-control" placeholder="输入服务器类型或者IP地址检索" />
          <i class="mdi mdi-magnify search-icon"></i>
        </div>
      </div>
      <div class="allNum">
        <div class="searchNum">
          为您检索到<span>2</span>台真实服务器。
          <p>最后更新时间： 52分钟前</p>
        </div>
        <div>
          <b-button @click="addServer" pill variant="dark" style="display: flex;align-items: center;">
            <i class="ri-add-line align-middle" style="font-size: 1rem;margin-right:6px;"></i>添加真实服务器
          </b-button>
        </div>
      </div>
      <div class="table-responsive">
        <b-table
          class="table-centered"
          :items="ordersData"
          :fields="fields"
          responsive="sm"
          :per-page="perPage"
          :current-page="1"
          thead-class="thead-light"
          @filtered="onFiltered"
        >
          <template v-slot:cell(name)="row">
            <div class="pointer" @click="toDetail(row.item)">{{ row.value}}</div>
          </template>
          <template v-slot:cell(environment)="row">
            <div v-if="row.value=='正式环境'" class="badge font-size-12 badge-soft-primary">{{ row.value}}</div>
            <div v-if="row.value=='测试环境'" class="badge font-size-12 badge-soft-info">{{ row.value}}</div>
          </template>
          <template v-slot:cell(activeState)="row">
            <div v-if="row.value=='正常'" class="badge font-size-12 badge-soft-success">{{ row.value}}</div>
            <div v-if="row.value=='异常'" class="badge font-size-12 badge-soft-danger">{{ row.value}}</div>
          </template>
        </b-table>
      </div>
      <div class="row">
        <div class="col">
          <div class="dataTables_paginate paging_simple_numbers float-right">
            <ul class="pagination pagination-rounded mb-0">
              <!-- pagination -->
              <b-pagination v-model="currentPage" :total-rows="totalRows" :per-page="perPage"></b-pagination>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.search {
  max-width: 300px;
  margin-bottom: 20px;
}
.table-centered{
  ::v-deep thead,::v-deep tbody{
    tr{
      th:last-child,td:last-child{
        text-align: right;
      }
    }
  }
}
.allNum{
  padding-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.searchNum{
  span{
    font-size: 1rem;
    color: #3444c1;
    margin: 0 4px;
    font-weight: 600;
  }
  p{
    display: inline-block;
    color: #999999;
    margin-left: 4px;
    margin-bottom: 0px;
  }
}
.sel{
  .all-products {
    font-size: 15px;
    font-weight: bold;
  }
  .isActive {
    color: #3c3e49;
    background-color: #e3e4e8;
  }
  button{
    border-radius: 0.2rem;
    background-color: #ffffff;
  }
  .states-type,.states-time {
    display:flex;
    margin-top: 20px;
    .type-title {
      display: inline-block;
      color: #74788d;
      padding-right: 10px;
    }
  }
  .states-time {
    margin-top:0;
  }
  .btn-item {
    font-size: 12px;
    margin-left: 10px;
    padding: 0.1rem 0.25rem;
    border: 0;
    margin-bottom: 20px;
    vertical-align: top;
    &:hover {
      cursor: pointer;
    }
  }
}

</style>

